<template>
  <div>
    <div class="board">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>电影管理</el-breadcrumb-item>
        <el-breadcrumb-item>电影类别</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="bill-management-container">
      <div style='padding:8px 0px'>
      <el-row :gutter="24">
        <el-col :span="5" >
          <el-input v-model="pageData.searchText" placeholder="搜索类别名称" autocomplete="off" />
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click='handerSearch'>查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click='addDialogVisible=true'>新增</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="pageData.records" style="width: 100%":header-cell-style="{background: '#800000'}">
      <el-table-column prop="movieCategoryId" label="ID" width="80" header-align="center" align="center" />
      <el-table-column prop="movieCategoryName" label="类别名称" header-align="center" align="center" />

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="pageData.current"
        v-model:page-size="pageData.size"
        :page-sizes="[10, 20, 30, 40]"
        :size="pageData.size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 新增对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增类别" width="500">
      <el-form :model="addObj">
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="addObj.movieCategoryName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handlerAddCancel">取消</el-button>
          <el-button type="primary" @click="handlerAdd">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑类别" width="500">
      <el-form :model="editObj">
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="editObj.movieCategoryName" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handlerEditCancel">取消</el-button>
          <el-button type="primary" @click="handlerEditCommit">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="deleteDialogVisible" title="删除提示" width="500">
      <span>确认要删除这个类别吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDelete">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue"
import api from '../api'
import lodash from 'lodash'

const pageData = ref({
  records: [],
  total: 0,
  size: 10,
  current: 1,
  pages: 1,
  searchText: ''
});

const handerSearch = () => {
  pageData.value.current = 1;
  getTableList();
}

const deleteDialogVisible = ref(false);
const deleteObj = ref({
  movieCategoryId: '',
  index: -1
});

onMounted(() => {
  getTableList();
});

const addDialogVisible = ref(false);
const addObj = ref({
  movieCategoryName: ''
});

const getTableList = async () => {
  const page = {
    current: pageData.value.current,
    size: pageData.value.size,
    searchText: pageData.value.searchText
  }
  const result = await api.getMovieCategoryPage(page);
  pageData.value = result;
}

const handlerAddCancel = () => {
  addObj.value = { movieCategoryName: '' };
  addDialogVisible.value = false;
}

const handlerAdd = async () => {
  await api.addMovieCategory(addObj.value);
  getTableList();
  addDialogVisible.value = false;
}

const editDialogVisible = ref(false);
const editObj = ref({
  movieCategoryId: '',
  movieCategoryName: ''
});

const handleEdit = (index, row) => {
  editDialogVisible.value = true;
  editObj.value = lodash.clone(row);
}

const handlerEditCancel = () => {
  editDialogVisible.value = false;
}

const handlerEditCommit = async () => {
  await api.editMovieCategory(editObj.value);
  getTableList();
  editDialogVisible.value = false;
}

const handleDelete = (index, row) => {
  deleteObj.value.movieCategoryId = row.movieCategoryId;
  deleteObj.value.index = index;
  deleteDialogVisible.value = true;
}

const confirmDelete = async () => {
  await api.deleteMovieCategory(deleteObj.value.movieCategoryId);
  pageData.value.records.splice(deleteObj.value.index, 1);
  getTableList();
  deleteDialogVisible.value = false;
}

const handleSizeChange = (val) => {
  pageData.value.size = val;
  getTableList();
}

const handleCurrentChange = (val) => {
  pageData.value.current = val;
  getTableList();
}
</script>

<style>
.bill-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.el-table {
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}
</style>